<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ebs UI</title>
    <link href="js/elementui/theme-chalk/index.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="headbar" id="grad">
        <i class="el-icon-menu"></i>
        WEBSS
        <el-button @click="exitApp" style="float:right;margin-top:22px;margin-right:35px" type="text">退出</el-button>
    </div>
    <el-menu :default-active="activeIndex"
             active-text-color="#ffd04b"
             background-color="#545c64"
             class="pub-menu"
             text-color="#fff"
             v-on:select="handleSelect">
        <el-menu-item index="0">
            <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
            </template>
        </el-menu-item>
        <el-menu-item index="1">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span>应用管理</span>
            </template>
        </el-menu-item>
        <el-menu-item index="2">
            <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>企业管理</span>
            </template>
        </el-menu-item>
        <el-menu-item index="3">
            <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>接口文档</span>
            </template>
        </el-menu-item>
        <el-menu-item index="4">
            <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>数据监控</span>
            </template>
        </el-menu-item>
    </el-menu>
    <div class="body-content">
        <iframe :src="nowUrl" id="ff" name="ff" style="height:100%;width:100%;border:none;overflow:hidden"></iframe>
    </div>
</div>
</body>
<style>
    body {
        margin: 0;
        padding: 0
    }

    .headbar {
        height: 80px;
        color: #f9f9f9;
        line-height: 80px;
        font-size: 24px;
        font-weight: bold;
        text-indent: 10px
    }

    .pub-menu {
        position: absolute;
        top: 80px;
        width: 150px;
        left: 0px;
        bottom: 0px
    }

    .body-content {
        position: absolute;
        top: 80px;
        left: 150px;
        right: 0px;
        bottom: 0px;
        background: #f9f9f9;
        overflow: hidden
    }

    #grad {
        background: -webkit-linear-gradient(left, #545c64, #000); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #545c64, #000); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #545c64, #000); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #545c64, #000); /* 标准的语法 */
    }
</style>
<script src="/ui/js/polyfill.min.js"></script>
<script src="/ui/js/vue/vue.js"></script>
<script src="/ui/js/elementui/index.js"></script>
<script src="/ui/js/axios/axios.min.js"></script>
<script src="/ui/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: "0",
                nowUrl: "/ui/pages/main.html"
            }
        },
        mounted: function () {
        },
        beforeDestroy() {
        },
        methods: {
            handleSelect(key, keyPath) {
                var that = this;
                if (key == 0) {
                    that.nowUrl = "/ui/pages/main.html";
                } else if (key == 1) {
                    that.nowUrl = "/ui/pages/app.html";
                } else if (key == 2) {
                    that.nowUrl = "/ui/pages/ent.html";
                } else if (key == 3) {
                    that.nowUrl = "/swagger-ui.html";
                } else if (key == 4) {
                    that.nowUrl = "/druid/index.html";
                }
            },
            exitApp() {
                $api.clearToken();
                location.href = '/login.html';
            }
        }
    });
</script>

</html>
